<nz-spin [nzSpinning]="isDownloading" i18n-nzTip="@@downloading" nzTip="Downloading...">
  <div class="container">
    <div class="description" nz-typography>
      <ng-container i18n="@@only-applies-to-current-project-env">Only applies to current environment (</ng-container> <span class="project-env">{{ projectEnv.projectName }} - {{ projectEnv.envName }}</span><ng-container i18n="@@including">), including</ng-container>
    </div>
    <div class="data-sync-list">
      <nz-card i18n-nzTitle="@@users" nzTitle="Users">
        <p i18n="@@including-all-users-of-current-env">Including all users of current environment.</p>
      </nz-card>
      <nz-card i18n-nzTitle="@@user-properties" nzTitle="User properties">
        <p i18n="@@including-all-customized-user-properties">Including all user properties of current environment.</p>
      </nz-card>
    </div>
    <div class="actions">
      <button i18n-nz-tooltip="@@download-data" nz-tooltip="Download data" class="standard-btn download-btn" (click)="onDownload()" nz-button nzType="primary">
        <i nz-icon nzType="icons:icon-download"></i>
        <ng-container i18n="@@download">Download</ng-container>
      </button>
      <button i18n-nz-tooltip="@@upload-data" nz-tooltip="Upload data" class="standard-btn upload-btn" (click)="openUploadForm()" nz-button nzType="primary">
        <i nz-icon nzType="icons:icon-upload"></i>
        <ng-container i18n="@@upload">Upload</ng-container>
      </button>
    </div>
    <a style="visibility: hidden;" #downloadRef [href]="downloadUri" [download]="downloadFileName"></a>
  </div>
</nz-spin>

<app-upload-drawer [visible]="uploadFormVisible" (close)="onUploadClosed()"></app-upload-drawer>
